<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://thyneleaf.org">

<head>
    <meta charset="utf-8">
    <title>Software Metrics By Software Engineering</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="Themesdesign" name="author">
    <!-- datepicker -->
    <link href="/css/datepicker.min.css" rel="stylesheet" type="text/css">

    <!-- jvectormap -->
    <link href="/css/jqvmap.min.css" rel="stylesheet">

    <!-- Bootstrap Css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link href="/css/icons.min.css" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link href="/css/app.min.css" rel="stylesheet" type="text/css">
    <!--editor css-->
    <link href="/editor.md-master//css/editormd.css" rel="stylesheet"/>
    <!-- nestable2 css -->
    <link rel="stylesheet" href="/css/jquery.nestable.min.css">
    <!-- Plugins css -->
    <link href="/css/dropzone.min.css" rel="stylesheet" type="text/css">

</head>

<body data-topbar="colored">

<!-- Begin page -->
<div id="layout-wrapper">

    <header id="page-topbar">
        <div class="navbar-header">
            <div class="d-flex">
                <!-- LOGO -->
                <div class="navbar-brand-box">
                    <a href="" class="logo logo-dark">
                                <span class="logo-sm">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                        <span class="logo-lg">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                    </a>

                    <a href="" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="/picture/logo-sm-light.png" alt="" height="22">
                                </span>
                        <span class="logo-lg">
                                    <img src="/picture/logo-light.png" alt="" height="20">
                                </span>
                    </a>
                </div>

                <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                    <i class="mdi mdi-backburger"></i>
                </button>

                <!-- App Search-->
                <form class="app-search d-none d-lg-block">
                    <div class="position-relative">
                        <input type="text" class="form-control" placeholder="Search...">
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>
            </div>

            <div class="d-flex">

                <div class="dropdown d-inline-block d-lg-none ml-2">
                    <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-search-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="mdi mdi-magnify"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0" aria-labelledby="page-header-search-dropdown">

                        <form class="p-3">
                            <div class="form-group m-0">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="col-md-4">
                <div class="float-right d-none d-md-block">
                    <div class="dropdown">
                        <button class="btn btn-light btn-rounded dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-settings-outline mr-1"></i> Settings
                        </button>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </header>

    <!-- ========== Left Sidebar Start ========== -->
    <div class="vertical-menu">

        <div data-simplebar="" class="h-100">

            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">Menu</li>

                    <li>
                        <a href="/to/index" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-airplay"></i></div>
                            <span>首            页</span>
                        </a>
                    </li>

                    <li class="menu-title">Basic</li>

                    <li>
                        <a href="/size/goToSize" class="waves-effect mm-active">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-window-grid"></i></div>
                            <span>传统度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/functionPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-schedule"></i></div>
                            <span>功能点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/featurePoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart"></i></div>
                            <span>特征值度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/usecasePoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart-pie"></i></div>
                            <span>用例点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/objectPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-lock-access"></i></div>
                            <span>对象点度量</span>
                        </a>
                    </li>

                    <li class="menu-title">Oriented Object</li>
                    <li>
                        <a href="/toLK/goToLKMetrics" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-sign-in-alt"></i></div>

                            <span>LK度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/toCK/goToCKMetrics" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-grids"></i></div>
                            <span>CK度量</span>
                        </a>
                    </li>

                </ul>
            </div>
            <!-- Sidebar -->
        </div>
    </div>
    <!-- Left Sidebar End -->
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">

            <!-- Page-Title -->
            <div class="page-title-box">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="page-title mb-1">Traditional Metrics</h4>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">Welcome to Software Metrics</li>
                            </ol>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end page title end breadcrumb -->

            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <h1>传统规模度量</h1>
                                            <p class="text-muted">LOC 是源代码的总行数，在代码行中，可以分为 无注释的源代码行（NCLOC）和 注释的源代码行（CLOC），源代码的总行数LOC即是两者之和。</p>
                                            <h1 style="color: #3051D3;font-weight: bold">请在下方粘贴您的源代码并提交</h1>
                                            <h1 style="color: #3051D3;font-weight: bold" id="result"></h1>
                                            <div class="mt-4">
                                                <a href="/to/index" class="btn btn-primary btn-sm">了解更多相关内容 <i class="mdi mdi-arrow-right ml-1"></i></a>
                                            </div>
                                        </div>

                                        <div class="col-6 ml-auto" align="right">
                                            <div>
                                                <img src="/newImage/lk.png" alt="" class="img-fluid">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<!--                    <div class="row">-->
<!--                        <div class="col-xl-12">-->
<!--                            <div class="card">-->
<!--                                <div class="card-body">-->
<!--                                    <h4 class="header-title">Dropzone</h4>-->
<!--                                    <p class="card-title-desc">DropzoneJS is an open source library-->
<!--                                        that provides drag’n’drop file uploads with image previews.-->
<!--                                    </p>-->

<!--                                    <div>-->
<!--                                        <form action="/size/getFilename" method="get" class="dropzone">-->
<!--                                            <div class="fallback">-->
<!--                                                <input name="file" id="file" type="file">-->
<!--                                            </div>-->
<!--                                            <div class="dz-message needsclick">-->
<!--                                                <div class="mb-3">-->
<!--                                                    <i class="display-4 text-muted mdi mdi-cloud-upload-outline"></i>-->
<!--                                                </div>-->

<!--                                                <h4>Drop files here to upload</h4>-->
<!--                                            </div>-->
<!--                                        </form>-->
<!--                                    </div>-->

<!--                                    <div class="text-center mt-4">-->
<!--                                        <button type="button" class="btn btn-primary waves-effect waves-light">Send Files</button>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    &lt;!&ndash; end row &ndash;&gt;-->

                    <div class="row">
                        <div class="col-8">
                            <form class="card" action="/size/getCodeCount" method="post">
                                <div class="card-body">
                                    <h4 style="font-size: 20px" class="header-title">请在此处粘贴源代码</h4>
                                    <div class="form-group">
                                        <div>
                                            <textarea id="code" name="code" style="overflow:scroll;overflow-x:hidden;resize:none;height: 500px"  required="" class="form-control" rows="5" th:text = "${code}"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <div align="right">
                                            <input type="submit" class="btn btn-primary waves-effect waves-light mr-1" value="Submit">
                                            <button type="reset" class="btn btn-secondary waves-effect" onclick="return clear();">
                                                Clear
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-4">
                            <div class="card">
                                <div class="card-body">
                                    <h4 style="font-size: 20px;color: #3051D3;" class="header-title">Metrics Result</h4>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 18px;color: #FF66C4;font-weight: bold" >LOC(Line of Code)</p>
                                                    <span style="font-size: 16px;width: 100%;" class="badge badge-soft-primary">有效程序行数</span>
                                                    <p style="font-size: 16px;" data-value="0" th:text="${codeCount?.normalLines}">0</p>
                                                    <span style="font-size: 16px;width: 100%;" class="badge badge-soft-success">空白行数</span>
                                                    <p style="font-size: 16px;" data-value="0" th:text="${codeCount?.whiteLines}">0</p>
                                                    <span style="font-size: 16px;width: 100%;" class="badge badge-soft-danger">注释行数</span>
                                                    <p style="font-size: 16px;" data-value="0" th:text="${codeCount?.commentLines}">0</p>
                                                    <span style="font-size: 16px;width: 100%;" class="badge badge-soft-warning">总行数</span>
                                                    <p style="font-size: 16px;" data-value="0" th:text="${codeCount?.totalLines}">0</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show1();">点击了解相关知识——></a>
                                                </div>
<!--                                                <div class="icons-lg ml-2 align-self-center">-->
<!--                                                    <i class="uim uim-grids"></i>-->
<!--                                                </div>-->
                                            </div>
                                            <div id="more1" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>LOC是什么</h5>
                                                LOC是源代码的总行数，在代码行中，可以分为无注释的源代码行（NCLOC）和 注释的源代码行（CLOC），源代码的总行数LOC即是两者之和。
                                                <br>
                                                (1)优点
                                                <br>
                                                代码是所有软件开发项目都有的“产品”，而且很容易计算代码行数
                                                <br>
                                                (2)缺点
                                                <br>
                                                ①对代码行没有公认的可接受的标准定义
                                                <br>
                                                ②代码行数量依赖于所用的编程语言和个人的编程风格
                                                <br>
                                                ③在项目早期，需求不稳定，设计不成熟，实现不确定的情况下很难准确的估算代码量
                                                <br>
                                                ④代码行强调编码的工作量，只是项目实现阶段的一部分
                                                <br>
                                                <a href="#" class="card-link" onclick="return hide1();">收起</a>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="media my-2">
                                                <div class="media-body">
                                                    <p style="font-size: 18px;color: #FF66C4;font-weight: bold" >CC(Cyclomatic complexity)</p>
                                                    <span style="font-size: 16px;width: 100%;" class="badge badge-soft-info">当前方法的圈复杂度</span>
                                                    <p style="font-size: 16px;" data-value="0" th:text="${circle}">0</p>
                                                    <br>
                                                    <a href="#" class="card-link" onclick="return show2();">点击了解相关知识——></a>
                                                </div>
<!--                                                <div class="icons-lg ml-2 align-self-center">-->
<!--                                                    <i class="uim uim-circle-layer"></i>-->
<!--                                                </div>-->
                                            </div>
                                            <div id="more2" style="display: none">
                                                <p style="font-size: 15px;color: grey;">
                                                <h5>CC是什么</h5>
                                                圈复杂度（Cyclomatic complexity，CC）也称为条件复杂度，是一种衡量代码复杂度的标准，其符号为V(G)。
                                                <br>
                                                圈复杂度可以用来衡量一个模块判定结构的复杂程度，其数量上表现为独立路径的条数，也可理解为覆盖所有的可能情况最少使用的测试用例个数。
                                                <br>
                                                圈复杂度可应用在程序的子程序、模块、方法或类别。
                                                <a href="#" class="card-link" onclick="return hide2();">收起</a>
                                            </div>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div><!-- end col-->
                    </div>

                </div> <!-- container-fluid -->
            </div>
            <!-- end page-content-wrapper -->
        </div>
        <!-- End Page-content -->


        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        2020 © Software Metric.
                    </div>
                    <div class="col-sm-6">
                        <div class="text-sm-right d-none d-sm-block">
                            Copyright &copy; 2022.Software Engineering 1901 in CSU All rights reserved.
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->


<!-- JAVASCRIPT -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/metisMenu.min.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/waves.min.js"></script>

<script src="/js/bundle.js"></script>

<!-- datepicker -->
<script src="/js/datepicker.min.js"></script>
<script src="/js/datepicker.en.js"></script>

<!-- apexcharts -->
<script src="/js/apexcharts.min.js"></script>

<script src="/js/jquery.knob.min.js"></script>

<!-- Jq vector map -->
<script src="/js/jquery.vmap.min.js"></script>
<script src="/js/jquery.vmap.usa.js"></script>

<script src="/js/dashboard.init.js"></script>

<script src="/js/app.js"></script>
<script src="/editor.md-master/examples//js/jquery.min.js"></script>
<script src="/editor.md-master/editormd.min.js"></script>

<!-- nestable2 js -->
<script src="/js/jquery.nestable.min.js"></script>

<script src="/js/nestable.init.js"></script>
<!-- dropzone js -->
<script src="/js/dropzone.min.js"></script>
<script src="/js/app.js"></script>

<!--echart-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "/editor.md-master/lib/"
        });
    });
</script>
<script>
    function show1()
    {
        var more = document.getElementById("more1");

        more.style.display = "block";

        return false;
    }
    function hide1()
    {
        var more = document.getElementById("more1");

        more.style.display = "none";

        return false;
    }

    function show2()
    {
        var more = document.getElementById("more2");

        more.style.display = "block";

        return false;
    }
    function hide2()
    {
        var more = document.getElementById("more2");

        more.style.display = "none";

        return false;
    }

    function show3()
    {
        var more = document.getElementById("more3");

        more.style.display = "block";

        return false;
    }
</script>
<script>
    function clear()
    {
        var code = document.getElementById("code");

        code.innerText = "";

        return false;
    }
</script>
</body>
</html>
